<template>
   <div>
    <ul>
    <li v-for="(item,index) in list" :key="index">
      {{ item.data }} - {{item.name}}
    </li>
  </ul>
  <p v-if="loading">加载中..</p>
  <p>count:{{count}}</p>
  <br>
      <button
        @click="pushFunction()">
        Add to cart
      </button>
   </div>
</template>

<script>
import { mapGetters, mapActions, mapState } from "vuex";
export default {
computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapState({
    list: state => state.list.lists,
    loading: state => state.list.loading,
    count:state=>state.counter.count,
  })
  },
  data() {
    return {
      number: 1
    };
  },
  methods: {
    ...mapActions("list",["push"]),
    pushFunction() {
      this.number++;
      this.push({ data: 1000, name: "1000" + this.number });
      console.log(this.lists);
    }
  },
  created() {
    //this.$store.dispatch('push',{"data":"hehe"})
    console.log("this.liststhis.liststhis.liststhis.liststhis.lists",this.$store.state,"loading:::",this.loading);
  }
};
</script>